<template>
	<view class="flex-col justify-start pages">
		<view class="flex-col list">
			<view class="flex-col justify-start mt-16 list-item section">
				<view class="flex-row justify-between items-center input" @click="tabse(1)">

					<view class="flex-row items-center ellipsis fontsizetit">
						<view class="flex-col justify-start items-center shrink-0 text-wrapper"><text
								class="font">起</text></view>
						<text class="ml-8 font_2 text  fontsizetit " style="color: #000;"
							v-if="onew.position">{{onew.position.name}}</text>
						<text class="ml-8 font_2 text  fontsizetit" v-else> 您要从哪里搬出</text>
					</view>
					<text class="font_2 text_2 fontsizetit" v-if="onew.position">{{array[onew.index]}} </text>
					<text class="font_2 text_2 fontsizetit" v-else> 搬出楼层 </text>
				</view>
			</view>
			<!-- 		<view class="flex-col justify-start mt-16 list-item section" @click="tabse(2)">
				<view class="flex-row justify-between items-center input">
					<view class="flex-row items-center">
						<view class="flex-col justify-start items-center shrink-0 text-wrappers" 
							style="background-color:node;">
							<image v-if="!typefarst"  @tap.stop="dianji()" class="shrink-0 image" src="/static/icon/zengjdzi.png" />
						
							<image v-else class="shrink-0 image"  @tap.stop="shoushan()" src="/static/icon/svj.png" />
							<text class="font">达</text>
						</view>
						<text class="ml-8 font_2 text" v-if="two.position">{{two.position.name}}</text>
						<text class="ml-8 font_2 text" v-else> 您要搬到哪里去 </text>
					</view>
					<text class="font_2 text_2" v-if="two.position"> {{array[two.index]}} </text>
					<text class="font_2 text_2" v-else> 搬入楼层 </text>
				</view>
			</view> -->

			<view class="mt-16 flex-row justify-between items-center list-item" v-for="(item,index) in maddress "
				:key="index">

				<view class="flex-row items-center  fontsizetit" @tap="assse(index)">
					<!-- 当数据条目数为1时，显示添加图标 -->
					<image v-if="maddress.length === 1" class="shrink-0 image" src="/static/icon/zengjdzi.png"
						@tap.stop="add()" />
					<!-- 当数据条目数为2时，第一条显示删除图标，第二条显示添加图标 -->
					<image v-else-if="maddress.length === 2 && index === 0" class="shrink-0 image"
						src="/static/icon/svj.png" @tap.stop="minus(index)" />
					<image v-else-if="maddress.length === 2 && index === 1" class="shrink-0 image"
						src="/static/icon/zengjdzi.png" @tap.stop="add()" />
					<!-- 当数据条目数大于等于3时，都显示删除图标 -->
					<image v-else class="shrink-0 image" src="/static/icon/svj.png" @tap.stop="minus(index)" />
					<view class="container"  >
						<text class="font_2 text_5 fontsizetit  text-with-ellipsis " v-if="item.name"
							style="color: #000;">{{item.name}} </text>
						<text class="font_2 text_5 fontsizetit" v-else>您要搬到哪里去 </text>
					</view>
					
				</view>
				<text   @tap="assse(index)" class="font_2 text_4 fontsizetit" v-if="item.index">{{array[item.index]}}</text>
				<text   @tap="assse(index)" class="font_2 text_4 fontsizetit" v-else>搬入楼层</text>


			</view>


			<view class="mt-16 flex-col justify-start section_4" @click="quotation">
				<view class="flex-row justify-between items-center input">
					<view class="flex-row items-center">
						<image class="shrink-0 image_2" src="/static/icon/sj.png" />

						<text class="ml-8 font_2 text_7 fontsizetit" v-if="time">{{time.moving_time_str}}</text>
						<text class="ml-8 font_2 text_7 fontsizetit" v-else>搬家时间</text>

					</view>
					<text class="font_2 fontsizetit" v-if="time">{{time.time_str}}</text>
					<text class="font_2 fontsizetit" v-else>搬家时间</text>
				</view>
			</view>


			<view class="mt-16 flex-col justify-start section_4" style="padding:26rpx 0rpx;">
				<view class="flex-row justify-between items-center input">
					<view class="flex-row items-center">
						<image class="shrink-0 image_4" src="/static/icon/lxr.png" />
						<input class="fontsizetit" style="margin-left:18rpx;font-size:28rpx;color:#000;width:550rpx;"
							maxlength="10"
							placeholder-style="font-size:30rpx; font-family: PingFang SC; line-height: 30rpx; color: #999999;"
							v-model="name" placeholder="请输入联系人" type="text" @blur="handleBlur" />


					</view>

				</view>
			</view>


			<view class="mt-16 flex-col justify-start section_4" style="padding:26rpx 0rpx;">
				<view class="flex-row justify-between items-center input">
					<view class="flex-row items-center">
						<image class="shrink-0 image_3" src="/static/icon/shss44.png" />
						<input class="fontsizetit" style="margin-left:18rpx;font-size:28rpx;color:#000;width:550rpx;"
							maxlength="11" v-model="phone" @blur="handleBlur" inputmode="numeric"
							placeholder-style="font-size:28rpx; font-family: PingFang SC; line-height: 30rpx; color: #999999;"
							placeholder="输入联系电话" type="number" />

					</view>

				</view>
			</view>




			<my-timing ref="timeinRef" @loginSuccess="updateUserInfo"></my-timing>

		</view>
	</view>
</template>

<script>
	import TiMing from '@/components/Timing.vue'; // 导入 选择时间 组件
	import {
		BerthList,
		FloorList
	} from '@/utils/user.js'
	export default {
		name: "movehouse",
		components: {
			'my-timing': TiMing, // 注册 时间 组件
		},
		data() {
			return {
				yarray: [],
				array: [],
				maddress: [{
					address: ''
				}],





				name: '',
				phone: '',
				type: '',
				home: '',
				onew: {},
				two: {},
				three: {},
				four: {},
				five: {},
				time: {},
				typefarst: false,

			};
		},
		onLoad() {
			this.lou()
		},
		methods: {


			dianji() {
				this.typefarst = true
			},



			// 更新的时间
			updateUserInfo(time) {
				var key = this.key
				console.log(time, 66666)
				this.time = time;
				// uni.setStorageSync('LoginData', res.data.data);
				// const myData = uni.getStorageSync('LoginData');
				var data = uni.getStorageSync(key) || {}; // 获取存储的数据或者创建一个新的对象
				data.time = time; // 将 time 存储到对象中

				uni.setStorageSync(key, data); // 将更新后的对象存储回去
				console.log(time, 66666);
			},

			handleBlur() {
				var key = this.key


				var data = uni.getStorageSync(key) || {}; // 获取存储的数据或者创建一个新的对象


				if (this.name != '') {

					data.name = this.name; // 将 time 存储到对象中

				}
				if (this.phone != '') {
					data.phone = this.phone; // 将 time 存储到对象中
				}


				uni.setStorageSync(key, data); // 将更新后的对象存储回去


			},

			// 请求楼层//
			lou() {

				FloorList().then(res => {
					console.log(res)
					this.yarray = Object.values(res.data.data);


					var arry = []

					this.yarray.forEach(function(obj) {

						arry.push(obj.title);
					});
					this.array = arry
				}).catch(error => {
					console.error('FloorList 方法执行出错：', error);
				});
			},



			tabse(i) {

				uni.navigateTo({
					url: '/pages/address/address?type=' + this.type + '&initm=' + i
				})
			},


			// 更新缓存的数据
			uetdata() {
				this.lou()
				this.maddress = [{
					address: ''
				}];
				this.onew = {}
				this.two = {}
				this.three = {}
				this.four = {}
				this.time = {}
				this.five = {}

				var key = '';
				if (this.type == 0) {
					var key = "putong";
				} else if (this.type == 1) {
					var key = "rishi";
				} else if (this.type == 2) {
					var key = "qiye";
				}
				this.key = key
				// 从本地缓存中获取大对象
				var storage = uni.getStorageSync(key) || {};

				this.time = storage.time
				this.name = storage.name
				this.phone = storage.phone

				console.log(storage, 'storage')

				if (storage.onew) {
					this.onew = JSON.parse(storage.onew);

				}



				if (storage.two) {
					this.two = JSON.parse(storage.two);
				}

				if (storage.three) {
					this.three = JSON.parse(storage.three);
					this.maddress[0].name = this.three.position.name
					this.maddress[0].index = this.three.index


				}
				if (storage.four) {
					this.four = JSON.parse(storage.four);
					while (this.maddress.length <= 1) {
						this.add();

					}

					this.maddress[1].name = this.four.position.name
					this.maddress[1].index = this.four.index
				}

				if (storage.five) {
					while (this.maddress.length <= 2) {
						this.add();

					}
					this.five = JSON.parse(storage.five);
					this.maddress[2].name = this.five.position.name
					this.maddress[2].index = this.five.index
				}

			},

			// 打开时间选择
			quotation() {
				// 通过 $refs 获取子组件实例
				const loginComponent = this.$refs.timeinRef;
				// 调用子组件方法
				loginComponent.open(1);
			},
			// 获取首页的信息
			open(i, e, its, it) {
				console.log(i, e, its, it)

				this.home = i
				this.type = e


				if (e === 1 && (it === 0 || it === 1)) {
					console.log('条件满足，返回 true');
					this.typefarst = false
					// 在这里执行条件满足时的操作
				} else {
					console.log('条件不满足，返回 false');
					// 在这里执行条件不满足时的操作
					this.typefarst = false
				}


				// 更新缓存的数据
				this.uetdata()

			},


			assse(i) {
				var i = i + 3

				uni.navigateTo({
					url: '/pages/address/address?type=' + this.type + '&initm=' + i
				})

			},



			minus(index) {
				console.log(888888)
				var key = '';
				if (this.type == 0) {
					var key = "putong";
				} else if (this.type == 1) {
					var key = "rishi";
				} else if (this.type == 2) {
					var key = "qiye";
				}
				console.log(key, 525)
				var data = uni.getStorageSync(key);
				console.log(data)

				// 根据不同的 index 值进行不同的操作
				switch (index) {
					case 0:
						this.deleteIfExists(data, 'three') || this.deleteIfExists(data, 'four') || this.deleteIfExists(
							data, 'five');
						break;
					case 1:
						this.deleteIfExists(data, 'four') || this.deleteIfExists(data, 'five');
						break;
					case 2:
						this.deleteIfExists(data, 'five');
						break;
					default:
						console.log('Invalid value of index');
						return; // 结束函数执行
				}

				// 将修改后的对象存储回 'rishi' 键中
				// uni.setStorageSync('rishi', data);
				console.log(data, "5555")
				uni.setStorageSync(key, data);
				this.maddress.splice(index, 1)
			},
			// 辅助函数：如果对象存在指定属性，则删除该属性并返回 true，否则返回 false
			deleteIfExists(obj, prop) {
				if (obj.hasOwnProperty(prop)) {
					delete obj[prop];
					return true;
				}
				return false;
			},
			add() {
				// 设置新地址的 type 为 true
				this.maddress.push({
					address: '',
					type: true
				});
				// 将除了最后一个地址外的所有地址的 type 设置为 false
				this.maddress.slice(0, -1).forEach(address => address.type = false);
				// 两秒后将最后一个地址的 type 设置为 false
				setTimeout(() => {
					this.maddress[this.maddress.length - 1].type = false;
				}, 2000);
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		width: 380rpx;

		white-space: nowrap;
		/* 不换行 */
		overflow: hidden;
		/* 超出部分隐藏 */
		text-overflow: ellipsis;

	}





	.section_4 {
		padding: 37.19rpx 0;
		background-color: #f4f5f7;
		border-radius: 8.26rpx;

		.image_4 {
			width: 32rpx;
			height: 32rpx;
		}

		.input {
			margin: 0 24.79rpx;

			.image_2 {
				width: 28.93rpx;
				height: 28.93rpx;
			}

			.image_3 {
				width: 24rpx;
				height: 32rpx;
			}

			.font_2 {
				font-size: 28rpx;
				font-family: PingFang SC;
				line-height: 23rpx;
				color: #999999;
			}

			.text_7 {
				color: #222222;
			}
		}
	}

	.list-item {
		padding: 33.06rpx 24.79rpx;
		background-color: #f4f5f7;
		border-radius: 8.26rpx;

		&:first-child {
			margin-top: 0;
		}

		.image {
			border-radius: 99.17rpx;
			width: 33.06rpx;
			height: 33.06rpx;
		}

		.font_2 {
			font-size: 28rpx;
			font-family: PingFang SC;
			line-height: 23rpx;
			color: #999999;
		}

		.text_5 {
			margin-left: 16.53rpx;
		}

		.text-wrapper_3 {
			margin-left: 8.26rpx;
			padding: 8.26rpx 0;
			border-radius: 4.13rpx;
			background-image: url('/static/icon/bjl.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			// height: 43.39rpx;

			.font {
				font-size: 20.66rpx;
				font-family: PingFang SC;
				line-height: 19.17rpx;
				color: #ffffff;
			}

			.text_6 {
				margin-left: 24.79rpx;
				margin-right: 8.26rpx;
			}
		}

		.text_4 {
			line-height: 22.87rpx;
		}
	}





	.pages {
		padding: 41.32rpx 0;
		background-color: #ffffff;
		border-radius: 16.53rpx;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.list {
			// margin: 0 41.32rpx;

			.list-item {
				padding: 33.06rpx 24.79rpx;
				background-color: #f4f5f7;
				border-radius: 8.26rpx;

				&:first-child {
					margin-top: 0;
				}

				.input {
					margin: 0 24.79rpx;


					.text-wrappers {
						padding: 8.26rpx 0;

						border-radius: 8.26rpx;
						width: 33.06rpx;
						height: 33.06rpx;

					}

					.text-wrapper {
						padding: 8.26rpx 0;
						background-color: #2b8eff;
						border-radius: 8.26rpx;
						width: 33.06rpx;
						height: 33.06rpx;

						.font {
							font-size: 20.66rpx;
							font-family: PingFang SC;
							line-height: 19.17rpx;
							color: #ffffff;
						}
					}

					.font_2 {
						font-size: 28rpx;
						font-family: PingFang SC;
						line-height: 23rpx;
						color: #999999;
					}

					.text {
						line-height: 22.95rpx;
					}

					.text_2 {
						line-height: 22.87rpx;
					}
				}
			}

			.section {
				padding: 33.06rpx 0;
				background-color: #f4f5f7;
				border-radius: 8.26rpx;
			}
		}
	}
</style>